import React, { useState, useEffect } from 'react'
import { getLikeList, getPlayDetail, getRecentSong, getPlaylistTracks, getLikeMusicComment } from '@/api/user'
import { Row, Col, Card, Modal, List, Image, Typography } from 'antd'
import { PlayCircleOutlined, HeartTwoTone, SmileOutlined, HeartOutlined, LikeOutlined } from '@ant-design/icons';
import parseTime from './UserPlayListFn'
import '@/styles/UserLikesSongs.scss'
import { useNavigate } from 'react-router-dom'


export default function UserLikesSongs() {

  const [likeListItem,setLikeListItem] = useState()
  const { Meta } = Card;
  const [RecentSong,serRecentSong] = useState()

  const navigate = useNavigate()
  const { Link } = Typography;
  const [likeId,setLikeId] = useState()


  useEffect(()=>{
    //喜欢列表
    getLikeList({id: (JSON.parse(localStorage.getItem('userInfo'))).userId}).then((res)=>{
      let arr1 = [];
      (res.data.ids)?.forEach((item)=>{
        arr1.push(item)
      })
      setLikeId(res.data.ids)
      // console.log('喜欢列表',res.data.ids);
      getPlayDetail(arr1).then((res)=>{
        // console.log('res2',res.data.songs);
        setLikeListItem(res.data.songs)
        // console.log(res.data.songs);
      })
    })
    //最近播放列表
    getRecentSong().then((res)=>{
      // console.log('最近',res.data.data.list);
      serRecentSong(res.data.data.list)
    })
  },[])

  //喜欢音乐的演唱和时间
  const descriptionData = (item)=>{
    let descriptionArr = []
    item?.ar?.map((ele)=>{
      return descriptionArr.push(ele.name)
    })
    if(item.publishTime){
      return descriptionArr.join('/') + '---' + parseTime(item.publishTime)
    }else{
      // eslint-disable-next-line no-useless-concat
      return descriptionArr.join('/') + '---' + '0000-00-00'
    }
  }

  //在喜欢歌单里删除添加
  const AddLike = (item)=>{
    getPlaylistTracks({ op:'add', pid:7385691471, tracks:item })
  }
  const RemoveLike = (item)=>{
    getPlaylistTracks({ op:'del', pid:7385691471, tracks:item }).then((res)=>{
      console.log(res);
    })
  }

  //喜欢列表的评论
  const [isLikeComment,setIsLikeComment] = useState(false)
  const [LikeComment,setLikeComments] = useState(false)

  const getLikeComment = (id)=>{
    getLikeMusicComment({ id }).then((res)=>{
      // console.log('评论',res);
      setLikeComments(res.data.comments)
      console.log('评论',res.data.comments);
      setIsLikeComment(true)
    })
  }

  //最近音乐列表的评论
  const [isRecentComment,setIsRecentComment] = useState(false)
  const [RecentComment,setRecentComments] = useState(false)

  const getRecentComment = (id)=>{
    getLikeMusicComment({ id }).then((res)=>{
      // console.log('评论',res);
      setRecentComments(res.data.comments)
      console.log('评论',res.data.comments);
      setIsRecentComment(true)
    })
  }

  return (
    <>
      <button className='UserLikesSongs likeOne'>喜欢的歌曲</button>
      <button className='UserLikesSongs RecentOne'>最近的歌曲</button>
      <Row gutter={16} style={{display: 'flex',justifyContent: 'space-evenly'}}>
        {/* 喜欢的歌曲列表 */}
        <Col span={6}>
          {
            likeListItem?.map((item)=>{
              return (
                <Card
                  style={{ width: 300, marginTop: '10%'}}
                  cover={
                    <img
                      alt="example"
                      src={item.al.picUrl}
                    />
                  }
                  actions={[
                    <PlayCircleOutlined key="setting" onClick={()=>navigate(`/songs/details/${item.id}`)} />,
                    likeId?.includes(item.id) 
                    ? 
                    <HeartTwoTone key="edit" twoToneColor="#c02c38" onClick={()=>{return (RemoveLike(item.id))}}/>
                    :
                    <HeartOutlined key="edit" onClick={()=>{return (AddLike(item.id))}}/>,
                    <SmileOutlined key="ellipsis"  onClick={(()=>getLikeComment(item.id))} />,
                  ]}
                  key={item.id}
                >
                  <Meta
                    title={item.name}
                    description={descriptionData(item)}
                  />
                </Card>
              )
            })
          }
        </Col>
        {/* 最近播放歌曲列表 */}
        <Col span={6}>
        {
            RecentSong?.map((item)=>{
              return (
                <Card
                  style={{ width: 300, marginTop: '10%' }}
                  cover={
                    <img
                      alt="example"
                      src={item.data.al.picUrl}
                    />
                  }
                  actions={[
                    <PlayCircleOutlined key="setting" onClick={()=>navigate(`/songs/details/${item.data.id}`)} />,
                    likeId?.includes(item.data.id) 
                    ? 
                    <HeartTwoTone key="edit" twoToneColor="#c02c38" onClick={()=>{return(RemoveLike(item.data.id))}}/>
                    :
                    <HeartOutlined key="edit" onClick={()=>{return(AddLike(item.data.id))}}/>,
                    <SmileOutlined key="ellipsis" onClick={(()=>getRecentComment(item.data.id))}  />,
                  ]}
                  key={item.data.id}
                >
                  <Meta
                    title={item.data.name}
                    description={descriptionData(item.data)}
                  />
                </Card>
              )
            })
          }
        </Col>
      </Row>
      {/* 喜欢列表的评论界面 */}
      <Modal footer={null} title="歌曲评论" open={isLikeComment} onCancel={()=>
        setIsLikeComment(false)} width='900px'>
        <List 
          dataSource={LikeComment}
          renderItem={(item)=>(
            <List.Item key={item.commentId
            }>
              <Image
                width={80}
                src={item.user.avatarUrl} 
                style={{marginRight:'15px'}}/>
                <List.Item.Meta 
                  style={{marginLeft:'20px'}} 
                  title={
                    <p style={{marginBottom:'16px'}}>
                      <Link href=''>{item.user.nickname}</Link> : {item.content}
                    </p>} 
                  description={
                    <p style={{marginTop:'20px'}}>{item.timeStr}
                    </p>}/>
                <div style={{marginTop:'70px'}}><p><LikeOutlined />({item.likedCount}) | 回复</p></div>
            </List.Item>
          )}
        />
      </Modal>
      {/* 最近歌曲列表的评论界面 */}
      <Modal footer={null} title="歌曲评论" open={isRecentComment} onCancel={()=>
        setIsRecentComment(false)} width='900px'>
        <List 
          dataSource={RecentComment}
          renderItem={(item)=>(
            <List.Item key={item.commentId
            }>
              <Image
                width={80}
                src={item.user.avatarUrl} 
                style={{marginRight:'15px'}}/>
                <List.Item.Meta 
                  style={{marginLeft:'20px'}} 
                  title={
                    <p style={{marginBottom:'16px'}}>
                      <Link href=''>{item.user.nickname}</Link> : {item.content}
                    </p>} 
                  description={
                    <p style={{marginTop:'20px'}}>{item.timeStr}
                    </p>}/>
                <div style={{marginTop:'70px'}}><p><LikeOutlined />({item.likedCount}) | 回复</p></div>
            </List.Item>
          )}
        />
      </Modal>
    </>
  )
}
